import React, {PureComponent} from 'react'

import {
    SwipeListView
} from 'react-native-swipe-list-view'

import {
    FlatList,
    Text,
    View,
    StyleSheet,
} from 'react-native'

class List extends PureComponent{
    constructor(props){
        super(props)
        this.state = {
            isLoading: false,
            listData: [
                {
                    key: '1'
                },
                {
                    key: '2'
                },
                {
                    key: '3'
                },
                {
                    key: '4'
                },
                {
                    key: '5'
                },
                {
                    key: '6'
                },
                {
                    key: '7'
                },
                {
                    key: '8'
                },
                {
                    key: '9'
                },
                {
                    key: '10'
                }
            ]
        }
    }
    handleRefresh(){
        alert('开始刷新')
    }
    handleEnd(){
        // alert('上拉加载')
        if (this.state.listData.length > 10) {
            return
        }
        let list = [...this.state.listData]
        for (let index = 0; index < 10; index++) {
            list.push({
                key: String(list.length + 1)
            })
        }
        this.setState({
            listData: list
        })
    }
    render(){
        return (
            <View style={style.container}>
                {/* <FlatList
                    data={this.state.listData}
                    renderItem={({item}) => <Text style={style.item}>{item.key}</Text>}
                    ItemSeparatorComponent={() => <View style={style.divide}></View>}
                    ListEmptyComponent={() => <View><Text>没有数据了</Text></View>}
                    ListFooterComponent={() => <Text>我也是有底线的。。。</Text>}
                    ListHeaderComponent={() => <Text>头部</Text>}
                    onRefresh={() => this.handleRefresh()}
                    refreshing={this.state.isLoading}
                    onEndReached={() => this.handleEnd()}
                    onEndReachedThreshold={0.4}
                ></FlatList> */}
                <SwipeListView
                    useFlatList
                    data={this.state.listData}
                    renderItem={ (data, rowMap) => (
                        <View style={style.item}>
                            <Text>I am {data.item.key} in a SwipeListView</Text>
                        </View>
                    )}
                    renderHiddenItem={ (data, rowMap) => (
                        <View style={style.rowBack}>
                            <Text>Left</Text>
                            <Text>Right</Text>
                        </View>
                    )}
                    leftOpenValue={75}
                    rightOpenValue={-75}
                />
            </View>
        )
    }
}

const style = StyleSheet.create({
    container: {
        backgroundColor: 'lightblue',
        flex: 1
    },
    item: {
        backgroundColor: 'lightgreen',
        height: 150
    },
    divide: {
        height: 6,
        backgroundColor: '#333'
    },
    rowBack: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    }
})

export default List